<template>
  <div style="background: #F7F7F7">
    <div id="big">
      <div id="top">
        <a href="/"><img src="../../assets/img/lgxy_ioc.png"/></a>
      </div>
      <div id="register">
        <div id="register_title">申请成为讲师</div>
        <div id="register_steps">
          <el-steps :active="2" simple>
            <el-step title="签订协议" active="0" icon="el-icon-document"></el-step>
            <el-step title="填写资料" active="1" icon="el-icon-edit"></el-step>
            <el-step title="审核" active="2" icon="el-icon-time"></el-step>
          </el-steps>
        </div>
        <div id="stepinfo">

          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
            <el-form-item label="姓名" prop="lecturerUserName">
              <el-input v-model="ruleForm.lecturerUserName" placeholder="请输入讲师名称"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="introduce">
              <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
            </el-form-item>

            <el-form-item label="电话">
              <el-input v-model="ruleForm.lecturerPhone" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
              <div id="subBtn">
                <button @click="submitForm('ruleForm')">提交</button>
              </div>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
    import step from '@/components/teacher_recruit/step'
    import Bottom from '@/components/Bottom'
    import qs from 'qs'
    export default {
      name: "ApplyThree",
      components: {step,Bottom},
      data() {
        return {
          ruleForm: {
            lecturerUserId : sessionStorage.getItem('uid'),
            lecturerUserName: '',
            introduce: '',
            lecturerPhone: this.$route.query.phone,//动态获取上个页面的值
          },
          rules: {
            lecturerUserName: [
              { required: true, message: '请输入讲师名称', trigger: 'blur' },
              { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
            ],
            introduce: [
              { required: true, message: '请填写简介', trigger: 'blur' }
            ],
          }
        }
      },
      methods: {
        submitForm(formName) {
          this.$axios2.post("student/stu/lecturer-audit/judgeAdd",qs.stringify({lecturerPhone:this.ruleForm.lecturerPhone})).then(r=>{
            //alert(JSON.stringify(r.data))
            if(r.data){
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  this.$axios2.post("student/stu/lecturer-audit/addAudit",qs.stringify(this.ruleForm)).then(r=>{
                    if (r.data==true){
                      this.$message({
                        message: '恭喜你，申请成功，正在审核',
                        type: 'success'
                      });
                      this.$router.push('/')
                    } else{
                      this.$message.error('申请失败');
                    }
                  })
                } else {
                  this.$message.error('申请失败，重新尝试');
                  return false;
                }
              });
            }else {
              this.$message.error('该号码已经注册，请勿重复操作');
            }
          })


          //alert(JSON.stringify(this.ruleForm))
        },

      }
    }
</script>

<style scoped>
  #big{
    width: 900px;
    margin: auto;
  }
  #top{
    height: 112px;
  }
  #top img{
    width: 186px;
    height: 52px;
    margin-top: 30px;
  }
  #register{
    border-radius: 8px;
    background: white;
  }
  #register_title{
    width: 900px;
    height: 80px;
    background: #E4E4E4;
    border-radius: 8px 8px 0 0;
    text-align: center;
    line-height: 80px;
    font-size: 18px;
  }
  #register_steps{
    width: 900px;
  }
  #stepinfo{
    padding: 30px;
  }
  #subBtn{
    text-align: center;
    padding: 30px;
  }
  #subBtn button{
    width: 320px;
    height: 46px;
    background: #D51423;
    border: 0;
    border-radius: 8px;
    color: white;
  }
  #stepinfo{
    padding: 40px;
    margin-bottom: 100px;
  }
</style>
